<template>
	<view class="bg-container">
		<view class="container container-1">
			
			
			<!-- <view class="btn-record">提现记录></view> -->
			
			<view class='title-container'>
				<view class="title-tip">当前佣金</view>
				<view class="title">{{total_amount.re_all_profit}}</view>
			</view>
			
			<view class='flat-main-container'>
				<view class="flat-area">
					<view class="flat-title-tip">
						今日收益
					</view>
					<view class="flat-title">
						{{total_amount.re_day_profit}}
					</view>
				</view>
				<view class="flat-area">
					<view class="flat-title-tip">
						当月收益
					</view>
					<view class="flat-title">
						{{total_amount.re_month_profit}}
					</view>
				</view>
			</view>
			
			<view class="btn-main-container">
				<view class="title-button">立即提现</view>
			</view>
		</view>
		
		
		<view class="container-2">
			
			<view class="record-row" v-for="(item,index) in list_detail" :key="index">
				<view class="record-title">
					{{item.server_type}}
					<text class="amount">+{{item.profit}}</text>
					<!-- <text class="level">直接会员</text> -->
				</view>
				<view class="record-subtitle">
					下单日期 {{$moment(item.recordtime).utcOffset(0).format('yyyy-MM-DD HH:mm')}}
				</view>
			</view>
			
			<view class="record-row" v-if="list_detail.length==0" style="padding-top:50px;">
				<shopro-empty :emptyData="emptyData"></shopro-empty>
			</view>
			<!-- <view class="record-row">
				<view class="record-title">
					分销收益
					<text class="amount">+12.8</text>
					<text class="level">直接会员</text>
				</view>
				<view class="record-subtitle">
					下单日期 2020-12-15 15：00
				</view>
			</view>
			<view class="record-row">
				<view class="record-title">
					分销收益
					<text class="amount">+12.8</text>
					<text class="level">直接会员</text>
				</view>
				<view class="record-subtitle">
					下单日期 2020-12-15 15：00
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	
	import shoproEmpty from '@/components/shopro-empty/shopro-empty.vue';
	export default{
		data(){
			return {
				total_amount:{},
				list_detail:[],
				emptyData: {
					img: '/static/imgs/empty/template_empty.png',
					tip: '暂无收益明细信息'
				}
			}
		},
		onLoad(){
			var u_json = localStorage.getItem("userInfo");
			var userInfo = JSON.parse(u_json);
			
			uni.request({
				url: this.$config.Distribute_URL+"getprofit_re/?dbname=Retail_Store"+userInfo.StoreUserInfo.StoreId+"&userid="+userInfo.StoreUserInfo.Uid,
				method:"GET",
				success:(pyResult)=>{
					this.total_amount=(pyResult.data);
				},
			})
			
			uni.request({
				url: this.$config.Distribute_URL+"getprofit_re_detail/?dbname=Retail_Store"+userInfo.StoreUserInfo.StoreId+"&userid="+userInfo.StoreUserInfo.Uid,
				method:"GET",
				success:(pyResult)=>{
					this.list_detail=pyResult.data;
				},
			})
		},
		methods:{
			
		}
	}
</script>

<style scope="scoped" lang="scss">
	.bg-container{
		width:100%;
		height:100%;
		background-color:white;
		display:flex;
		flex-direction:column;
		align-items:center;
		justify-content:flex-start;
		
	}
	.title-container{		
		padding-top:10rpx;
	}
	
	.container{
		width:100%;
		display:inline-block;
		background-color:white;
		position:relative;
		// overflow:hidden;
		z-index:100;
		
		&.container-1{
			height:400rpx;
			flex-shrink:0;
			background-color:rgb(240,199,135);
		}		
		
		
		.btn-record{
			position:absolute;
			top:10rpx;
			right:40rpx;
			color:white;
		}
		
		
		.btn-main-container{
			text-align:center;width:100%;position:absolute;bottom:-70rpx;
		
		
			.title-button{
				width:320rpx;
				height:140rpx;
				line-height:80rpx;
				text-align:center;
				margin-top:30rpx;
				display:inline-block;
				background-color:rgb(240,199,135);
				border-radius:70rpx;
				border:solid 30rpx white;
				color:white;
			}
		
		}
		
		.flat-main-container{
			width:100%;
			display:flex;
			margin-top:80rpx;
			color:white;
			justify-content:space-between;
			
			.flat-area{
				width:48%;
				display:inline-block;
				text-align:center;
			}
			
			.flat-title-tip{
				font-size:30rpx;
			}
			
			.flat-title{
				font-size:40rpx;
			}
			
			
		}
		
		
	}
	
	.title-container{
		width:100%;
		text-align:center;
		color:white;
		
		.title{
			font-size:60rpx;
		}
	}
	
	.container-2{
		width:100%;
		margin-top:40rpx;
		
		.record-row{
			padding:30rpx 40rpx;
			border-bottom:solid 1px #efefef;
			
			.record-title{
				font-size:32rpx;
				font-weight:bold;
				
				.amount{
					margin-left:40rpx;
					color:#ee1919;
				}
				.level{
					float:Right;
					font-size:28rpx;
					color:rgb(240,199,135);
				}
			}
			.record-subtitle{
				color:#888888;
				font-size:28rpx;
				margin-top:15rpx;
			}
		}
	}
</style>
